<template>
	<div class="header-box">
		<!-- 当在后台模板活动页中头部的东西不能编辑，显示遮罩 -->
		<div class="customHeaderStyle_cover" v-if="hasCover"></div>
		<div ref="nav_root" class="nav_root" v-if="!headerResizeState">
			<div :class="{foodTitle : foodTitle}" style="width: 100%;height: 100%;" ref="transformBox">
				<div class="headerRight" :style="'background:' + backgroundColor" ref="nav">
					<div class="burger" v-if="hasList" @click.stop="showList" ref="burger">
						<i class="burgers"></i>
						<i class="burgers"></i>
						<i class="burgers"></i>
					</div>
					<div class="delivery" v-if="hasBacks" @click.stop="mGoBack" >
						<i class="symbol1" :style="'border-color:' + fontColor"></i>
						<i class="symbol2" :style="'border-color:' + fontColor"></i>
					</div>
					<div v-if="hasBack" class="delivery" ref="back" @click="mGoBack">
						<i class="symbol1" :style="'border-color:' + fontColor"></i>
						<i class="symbol2" :style="'border-color:' + fontColor"></i>
					</div>
					<div class="brandLogo" v-if="hasLogo">
						<img src="static/image/ningjialogo.png" alt="ningLogo">
					</div>
					<div slot="header">

					</div>
					<div class="detail" :style="'color:' + fontColor+';font-size:'+fontSize+';text-align:'+textAlign" v-if="hasTitle">{{title}}</div>
					<div class="details" :style="'color:' + fontColor+';font-size:'+fontSize+';text-align:'+textAlign" v-if="canteen">{{title}}</div>

					<div v-if="titleType == 'classify' " class="cjy-title-text-center" style="">
						<div>
							<span style="position:relative;" @click="$emit('showClassify')">{{title}}
							<div v-if="hasArray" class="cjyUp" :class="{cjyDown:isShowFirstClassify}">
								<div class="cjy-arrow"></div>
							</div>
							</span>
							<a class="cjy-search_icon" v-if="hasSearch" @click="$router.push('searcher')">
								<i class="icon njfont nj-sousuo"></i>
							</a>
						</div>
					</div>

					<div class="rightIcon">
						<v-CartShowNum v-if="hasCart && !isFood"></v-CartShowNum>
						<v-CartFoodNum v-if="hasCart && isFood"></v-CartFoodNum>
					</div>
					<RecommendStore style="width:65%;position: absolute;left: 17%;" :isHome="isHome"></RecommendStore>
					<slot></slot>
				</div>
				<!-- <slot name="zx"></slot> -->
				<!-- <top-popup :isShow="getIsShow" :isHome="isHome" :shoreList="shoreList" :addressList="addressList"></top-popup> -->
			</div>
		</div>
		<div style="" class="header-resize" v-show="headerResizeState"></div>
	</div>
</template>
<script>
	import "./index.css";
	import axios from 'axios';
	import CartShowNum from "../../real-components/CartShowNum";
	import CartFoodNum from "../../real-components/CartShowNum/cartFoodNum.vue";
	import { mapState, mapGetters, mapMutations } from 'vuex';
	import checkCssStyleCompatibility from "../../utils/checkCssStyleCompatibility.js";
	// import TopPopup from '../../real-components/topPopup';
	import RecommendStore from '../../real-components/recommendStore';
	// import {reFreshUserInfo} from '../../utils/WXH/login.js';
	export default {
		props: {
			title: "",
			hasTitle: {
				type: Boolean,
				default: false
			},
			hasList: {
				type: Boolean,
				default: false
			},
			hasCart: {
				type: Boolean,
				default: false
			},
			hasBack: {
				type: Boolean,
				default: false
			},
			goBack: {
				type: Function,
				default: () => {
					window.history.go(-1);
				}
			},
			hasLogo: {
				type: Boolean,
				default: false
			},
			textAlign: {
				type: String,
				default: 'left'
			},
			isHome: {
				type: Boolean,
				default: false
			},
			titleType: {
				type: String,
				default: ''
			},
			hasSearch: {
				type: Boolean,
				default: false
			},
			isShowFirstClassify: {
				type: Boolean,
				default: false
			},
			//是否开启兼容模式
			IDGModel: {
				type: Boolean,
				default: false
			},
			//需要进行兼容模式监听的input框的selector
			IDGInputSelector: {
				type: [String, Array],
				default: ""
			},
			//小周的绿色头部
			backgroundColor: {
				type: String,
				default: '#FFF'
			},
			//小周的白色标题
			fontColor: {
				type: String,
				default: '#444'
			},
			//堂食的确认订单头部标志
			canteen: {
				type: Boolean,
				default: false
			},
			//堂食的确认订单头部返回
			hasBacks: {
				type: Boolean,
				default: false
			},
			isFood: {
				type: Boolean,
				default: false
			},
			foodTitle: {
				type: Boolean,
				default: false
			},
			fontSize: {
				type: String,
				default: '1.0rem'
			},
			hasArray: {
				type: Boolean,
				default: true
			},
			/**
			 * 后台页面只能看不能点
			 */
			hasCover: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				flag: true,
				isShow: true,
				shoreList: [],
				addressList: [1, 2, 3],
				list: [{
						name: "商城首页",
						url: "/home/home",
						class: "class_a",
						iconStyle: "icon njfont nj-shangcheng"
					},
					{
						name: "商品分类",
						url: "/main/classify",
						class: "class_a",
						iconStyle: "icon njfont nj-fenlei"
					}
				],
				restList: [{
					name: "购物车",
					url: "/cart",
					class: "class_a",
					iconStyle: "icon njfont nj-gouwuche"
				}, {
					name: "个人中心",
					url: "/main/profile",
					class: "class_a",
					iconStyle: "icon njfont nj-wode"
				}, {
					name: " 我的订单",
					url: "/main/order",
					iconStyle: "level_menu fa fa-angle-right"
				}, {
					name: " 我的车辆",
					url: "/main/car",
					iconStyle: "level_menu fa fa-angle-right"
				}, {
					name: " 我的优惠券",
					url: "/discount",
					iconStyle: "level_menu fa fa-angle-right"
				}, {
					name: " 我的收藏",
					url: "/collect",
					iconStyle: "level_menu fa fa-angle-right"
				}, {
					name: " 我的消息",
					url: "/news",
					iconStyle: "level_menu fa fa-angle-right"
				}],
				//header占位框的状态
				headerResizeState: false
			}
		},
		computed: {
			...mapGetters('wxh', {
				login: "login",
				userInfo: 'userInfo',
				sessionId: 'sessionId'
			}),
			...mapGetters('zx', [
				"getIsShow"
			]),
			isiOS() {
				return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios
			},
			isXiangpu() {
				return u.indexOf("xiangpu") > -1;
			}
		},
		components: {
			"v-CartShowNum": CartShowNum,
			"v-CartFoodNum": CartFoodNum,
			// "TopPopup": TopPopup,
			RecommendStore
		},
		async mounted() {
			this.isShare = this.$route.query.share;
			if(!this.isShare) {
				document.getElementsByTagName("title")[0].innerText = '宁家鲜生'
			}
			var container = document.getElementsByClassName("home-container")[0];
			container.style.transform = "translateX(0px)";
			//添加右划划出侧边栏的事件
			this.addEventOnContainer();
			if(this.IDGInputSelector) {
				if(!isiOS) {
					return;
				}
				setTimeout(() => {
					this.addInputEventListener();
				}, 100);
			}
		},
		methods: {
			//添加右划划出侧边栏的事件
			addEventOnContainer() {
				let touchstartx = 0;
				let touchstarty = 0;
				let touchendx = 0;
				let touchendy = 0;
				let isConflict = 0; //判断是否可以滑动的标志
				var container = document.getElementsByClassName("home-container")[0];
				//监听滑动事件
				container.addEventListener('touchstart', TouchStart.bind(this), false);
				container.addEventListener('touchmove', TouchMove, false);
				container.addEventListener('touchend', TouchEnd.bind(this), false);

				function TouchStart(e) {
					//滑动时不会出现侧边栏的区域
					var scroller = document.getElementsByClassName('scroller_list');
					var wrapper = document.getElementsByClassName('wrapper-content');
					var noSlide = document.getElementsByClassName('noSlide');
					var headerRight = document.getElementsByClassName('headerRight');
					//不会出现侧边栏区域拼接成一个数组
					let exemptArea = convertNodeList(scroller).concat(convertNodeList(noSlide)).concat(convertNodeList(wrapper)).concat(convertNodeList(headerRight));
					exemptArea.forEach(ele => {
						isChildOf(e.target, ele, container) && (isConflict = 1);
					})
					touchstartx = e.touches[0].clientX;
					touchstarty = e.touches[0].clientY;
					touchendx = e.touches[0].clientX;
					touchendy = e.touches[0].clientY;
				}

				function TouchMove(e) {
					touchendx = e.touches[0].clientX;
					touchendy = e.touches[0].clientY;
				}

				function TouchEnd(e) {
					Math.abs(touchendy - touchstarty) < touchendx - touchstartx && touchendx - touchstartx > document.documentElement.clientWidth / 3 && !isConflict && this.showList();
					isConflict = 0;
				}

				//把节点组转化为数组
				function convertNodeList(nodeList) {
					if(nodeList.length) {
						return Array.prototype.slice.call(nodeList);
					} else {
						return [];
					}
				}

				//判断是否为可滑动部分的子节点   点击的节点·不会出现侧边栏的区域·检测到的最顶级节点
				function isChildOf(target, ele, TopNode) {
					if(target == TopNode) {
						return 0;
					}
					if(target == ele) {
						return 1;
					}
					if(target != TopNode && target != ele) {
						return isChildOf(target.parentNode, ele, TopNode);
					}
				}
			},
			//划出侧边栏
			showList(e) {
				var that = this;
				// await this.reFreshUserInfo(this);
				// var burgers = this.$refs.burger.children;
				var burgers = document.getElementsByClassName('burgers');
				var container = document.getElementsByClassName("home-container")[0];
				var list = document.getElementsByClassName("aside")[0];
				if(!list) {
					PSEvent.listen("doOfflineAsideEvents", () => {
						setTimeout(() => {
							this.showList();
						}, 0);
					});
					return;
				};
				container.style.position = "absolute";
				list.style.position = "absolute";
				var userAgent = navigator.userAgent;
				var index = userAgent.indexOf("Android");
				if(index >= 0) {
					var androidVersion = parseFloat(userAgent.slice(index + 8));
					if(androidVersion < 4.5) {
						if(container.style.left != "260px") {
							container.style.left = "260px";
							container.style.top = "0";
							list.style.left = "260px";
							list.style.top = "0";
							let shade = document.createElement("div");
							let style = `width:100%;height:100%;background:black;opacity:.3;position:absolute;left:0;top:0;z-index:100;`;
							shade.setAttribute("id", "shadeBlock");
							shade.setAttribute("style", style);
							container.appendChild(shade);
							shade.onclick = function(e) {
								container.removeChild(shade);
								container.style.left = "0px";
								container.style.top = "0";
								list.style.left = "0px";
								list.style.top = "0";
							}
						} else {
							container.style.left = "0px";
							container.style.top = "0";
							list.style.left = "0px";
							list.style.top = "0";
						}
					} else {
						ProgressiveList("Android");
					}
				} else {
					ProgressiveList("IOS");
				}

				function ProgressiveList(model) {
					container.style.transition = "transform .5s ease-out 0.1s";
					var hasTouch = function() {
						var touchObj = {};
						touchObj.isSupportTouch = "ontouchend" in document ? true : false;
						touchObj.isEvent = touchObj.isSupportTouch ? "touchstart" : "click";
						return touchObj.isEvent;
					}
					//检验burgers.length是为了防止滑动时报错
					if(container.style.transform != "translateX(260px)" && burgers.length) {
						burgers[0].className += " burgers0";
						burgers[1].className += " burgers1";
						burgers[2].className += " burgers2";
						container.style.transform = "translateX(260px)";
						list.style.transform = "translateX(0px)";
						let shade = document.createElement("div");
						let style = `width:100%;height:100%;background:black;opacity:.3;position:absolute;left:0;top:0;z-index:100;`;
						shade.setAttribute("id", "shadeBlock");
						if(model == "Android") {
							shade.style.width = '100%';
							shade.style.height = '100%';
							shade.style.background = 'black';
							shade.style.opacity = '0.3';
							shade.style.position = 'absolute';
							shade.style.left = '0';
							shade.style.top = '0';
							shade.style.zIndex = '100';
						} else {
							shade.setAttribute("style", style);
						}
						container.appendChild(shade);
						// container.onclick = function (e) {
						//   e.preventDefault();
						//   burgers[0].classList.remove("burgers0");
						//   burgers[1].classList.remove("burgers1");
						//   burgers[2].classList.remove("burgers2");
						//   aside.style.transform = `translateX(-260px)`;
						//   container.style.transform = `translateX(0px)`;
						// }
						let startX = 0;
						let endX = 0;
						let movingX = 0;
						let aside = document.querySelector(".aside");
						if(hasTouch() == "touchstart") {
							shade.addEventListener("touchstart", commence, false);

							shade.addEventListener("touchmove", moving, false);

							shade.addEventListener("touchend", termination, false);

							// container.addEventListener("touchstart", commence, false);

							// container.addEventListener("touchmove", moving, false);

							// container.addEventListener("touchend", Ctermination, false);

							function commence(e) {
								e.preventDefault();
								startX = e.touches[0].clientX;
							}

							function moving(e) {
								movingX = e.touches[0].clientX;
							}

							function termination(e) {
								setTimeout(() => {
									e.preventDefault();
									// if(movingX - startX <= 0){
									burgers[0].classList.remove("burgers0");
									burgers[1].classList.remove("burgers1");
									burgers[2].classList.remove("burgers2");
									aside.style.transform = `translateX(-260px)`;
									container.style.transform = `translateX(0px)`;
									container.removeChild(shade);
									// }
									startX = 0;
									movingX = 0;
									shade.removeEventListener("touchstart", commence);
									shade.removeEventListener("touchmove", moving);
									shade.removeEventListener("touchend", termination);
									// container.removeEventListener("touchstart", commence);
									// container.removeEventListener("touchmove", moving);
									// container.removeEventListener("touchend", termination);
								}, 300)
							}

							// function Ctermination (e) {
							//   setTimeout(() => {
							//     e.preventDefault();
							//     if(movingX - startX <= 0){
							//       burgers[0].classList.remove("burgers0");
							//       burgers[1].classList.remove("burgers1");
							//       burgers[2].classList.remove("burgers2");
							//       aside.style.transform = `translateX(-260px)`;
							//       container.style.transform = `translateX(0px)`;
							//     }
							//     startX = 0;
							//     movingX = 0;
							//     container.removeEventListener("touchstart", commence);
							//     container.removeEventListener("touchmove", moving);
							//     container.removeEventListener("touchend", Ctermination);
							//   },300)
							// }
						} else {
							shade.onclick = function(e) {
								setTimeout(() => {
									e.preventDefault();
									burgers[0].classList.remove("burgers0");
									burgers[1].classList.remove("burgers1");
									burgers[2].classList.remove("burgers2");
									aside.style.transform = `translateX(-260px)`;
									container.style.transform = `translateX(0px)`;
									container.removeChild(shade);
								}, 300)
							}
						}
						// shade.ontouchstart = function (e) {
						//   e.preventDefault();
						//   startX = e.touches[0].clientX;
						// };

						// shade.ontouchmove = function (e) {
						//   movingX = e.touches[0].clientX;
						// };
						// shade.ontouchend = function (e) {
						//   setTimeout(() => {
						//     e.preventDefault();
						//     if(movingX - startX <= 0){
						//       burgers[0].classList.remove("burgers0");
						//       burgers[1].classList.remove("burgers1");
						//       burgers[2].classList.remove("burgers2");
						//       aside.style.transform = `translateX(-260px)`;
						//       container.style.transform = `translateX(0px)`;
						//       container.removeChild(shade);
						//     }
						//     startX = 0;
						//     movingX = 0;
						//   },300)
						// }
					}
				}

				function lowerHideList() {
					if(checkCssStyleCompatibility("transform")) {
						// let styleValue = "position: absolute;left: 260px;top: ";
						container.style.left = "0";
						container.style.top = "0";
						list.style.left = "0";
						list.style.top = "0";
					}
				}
			},
			mGoBack() {
				setTimeout(() => {
					this.$store.commit('cjy/SET_IS_RETURN', true)
					if(window.history.length == 2 || window.history.length < 2) {
						this.$router.push({
							path: 'home'
						})
					} else {
						this.goBack();
					}
				}, 0);
			},
			//计算头部应该处于的位置，当对应的input框获取到焦点时调用该方法
			calculateTopPosition() {
				this.headerResizeState = true;
				// setTimeout(() => {
				let top1 = document.documentElement.scrollTop;
				let top2 = document.body.scrollTop;
				let top = top1 ? top1 : top2;
				let el = document.querySelector(".nav_root");
				el.style.position = "absolute";
				el.style.left = "0";
				el.style.top = `${top}px`;
				el.style.zIndex = "1";
				// }, 30);
			},
			//重置头部状态
			resetTopPosition() {
				this.headerResizeState = false;
				let el = document.querySelector(".nav_root");
				el.style.position = "static";
				el.style.top = "unset";
				el.style.left = "unset";
			},
			gwPlan() {
				setTimeout(() => {
					this.headerResizeState = !this.headerResizeState;
				}, 17)

				setTimeout(() => {
					this.headerResizeState = !this.headerResizeState;
				}, 18)
			},
			//添加头部的监听事件
			addInputEventListener() {
				if(Array.isArray(this.IDGInputSelector)) {
					this.IDGInputSelector.forEach(item => {
						if(document.querySelector(item)) {
							// window.onscroll = this.calculateTopPosition;
							// document.querySelector(item).addEventListener("focus", this.resetTopPosition, false);
							document.querySelector(item).addEventListener("blur", this.gwPlan, false);
						}
					});
					return false;
				}
				window.onscroll = this.calculateTopPosition;
				// document.querySelector(this.IDGInputSelector).addEventListener("focus", this.calculateTopPosition, false);
				document.querySelector(this.IDGInputSelector).addEventListener("blur", this.gwPlan, false);

			},
			//移除监听事件

			// initBackClickEvent() {

			//     // if (document.querySelector(".delivery")) {
			//     if (this.$refs.back) {
			//         // document.querySelector(".delivery").addEventListener("click", () => {
			//         this.$refs.back.addEventListener("touchstart", () => {
			//             this.mGoBack();
			//         }, false);
			//     }

			// }
		},
		watch:{
			title(newV,oldV){
				console.log(newV,oldV,"头部标题")
			}
		}
	}
</script>
<style scoped>

</style>